<!-- 添加区域 -->
<template>
  <div>
    <el-dialog
      title="创建区域"
      :visible.sync="addDialog"
      width="30%"
      :before-close="handleClose"
      size="mini"
    >
      <el-form
        ref="domainForm"
        :model="domainForm"
        label-width="80px"
        size="mini"
      >
        <el-form-item label="上级区域">
          <select-tree
            v-model="domainForm.parentId"
            :options="parents"
            :props="defaultProps"
          />
        </el-form-item>
        <el-form-item label="区域名称">
          <el-input v-model="domainForm.name"></el-input>
        </el-form-item>
        <el-form-item label="是否启用">
          <el-radio-group v-model="domainForm.enable">
            <el-radio
              v-for="item in enables"
              :key="item.code"
              :label="item.code"
              >{{ item.remark }}</el-radio
            >
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="domainForm.remark"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleAddSubmit" size="mini"
            >确定</el-button
          >
          <el-button @click="handleResetDomainForm" size="mini">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import SelectTree from "@/components/selectTree/index.vue";
export default {
  props: {
    enables: {
      type: Array,
    },
    parents: {
      type: Array,
    },
    currentPanrent: ''
  },
  components: {
    SelectTree,
  },
  data() {
    return {
      addDialog: true,
      domainForm: {},
      defaultProps: {
        parent: "parentId", // 父级唯一标识
        value: "id", // 唯一标识
        label: "name", // 标签显示
        children: "children", // 子级
      },
    };
  },
  created() {
    this.handleResetDomainForm();
    if (this.currentPanrent != "") {
      this.domainForm.parentId = this.currentPanrent.id;
    }
  },
  mounted() {},
  methods: {
    /**
     * 重置表单数据
     */
    handleResetDomainForm() {
      this.domainForm = {
        enable: 1,
      };
    },
    /**
     * 关闭创建对话框
     */
    handleClose() {
      this.domainForm = {};
      this.$emit("close");
    },
    /**
     * 提交创建
     */
    handleAddSubmit() {
      this.$emit("submit", this.domainForm);
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>